import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:oktoast/oktoast.dart';
import 'package:wan_android_flutter/common/base/base_page.dart';
import 'package:wan_android_flutter/common/resources/spacing.dart';
import 'package:wan_android_flutter/common/resources/text_styles.dart';
import 'package:wan_android_flutter/common/widget/material_layout.dart';
import 'package:wan_android_flutter/res/assets_res.dart';

import '../../generated/locales.g.dart';
import 'login_logic.dart';

class LoginPage extends BasePage<LoginLogic> {
  LoginPage({super.key});

  @override
  bool showAppBar() {
    return false;
  }

  @override
  Widget buildContent(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: colorData.bgWhite,
      alignment: Alignment.center,
      padding: const EdgeInsets.symmetric(horizontal: 40),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              InkWell(
                onTap: () {
                  Get.back();
                },
                child: Image.asset(
                  AssetsRes.CLOSE,
                  width: 30,
                  height: 30,
                  color: colorData.textBlack,
                ),
              )
            ],
          ),
          Spacing.vSpacing40,
          Center(
            child: Image.asset(
              AssetsRes.HEAD,
              width: 60,
              height: 60,
            ),
          ),
          Spacing.vSpacing20,
          Text(
            LocaleKeys.username.tr,
            style: colorData.textBlack.s18.regular,
          ),
          Spacing.vSpacing16,
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderRadius: const BorderRadius.all(Radius.circular(25)),
                borderSide: BorderSide(
                  color: colorData.bgDivider,
                  width: 2.0,
                ),
              ),
              hintText: LocaleKeys.username_hint.tr,
              hintStyle: colorData.textBlack.s15.regular,
              contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            ),
            focusNode: logic.userNameFocusNode,
            controller: logic.userNameController,
            style: colorData.textBlack.s15.regular,
          ),
          Spacing.vSpacing20,
          Text(
            LocaleKeys.pwd.tr,
            style: colorData.textBlack.s18.regular,
          ),
          Spacing.vSpacing16,
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(
                borderRadius: const BorderRadius.all(Radius.circular(25)),
                borderSide: BorderSide(
                  color: colorData.bgDivider,
                  width: 2.0,
                ),
              ),
              hintText: LocaleKeys.pwd_hint.tr,
              hintStyle: colorData.textBlack.s15.regular,
              contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            ),
            focusNode: logic.pwdFocusNode,
            controller: logic.pwdController,
            style: colorData.textBlack.s15.regular,
          ),
          Spacing.vSpacing40,
          SizedBox(
            width: double.infinity,
            child: MaterialLayout(
              padding: const EdgeInsets.symmetric(vertical: 10),
              borderRadius: const BorderRadius.all(Radius.circular(25)),
              onPressed: () {
                if (logic.userNameController.text.isEmpty) {
                  showToast(LocaleKeys.username_hint.tr);
                  return;
                }
                if (logic.pwdController.text.isEmpty) {
                  showToast(LocaleKeys.pwd_hint.tr);
                  return;
                }
                logic.login();
              },
              backgroundColor: colorData.textBlue,
              child: Text(
                LocaleKeys.login.tr,
                style: colorData.textBlack.s18.regular,
              ),
            ),
          )
        ],
      ),
    );
  }
}
